<template>
	<div class="page">
		<form>
			<input type="text" placeholder="请输入搜索关键字" />
			<input type="button" value="查询" />
		</form>
		
		<div class="banner">
			<a href="" class="left">&lt;</a>
			<div class="picture">
				<ul>
					<li v-for="(item,index) in imgList" :key="item.id">
						<img :src="`${$Imgurl}/api/public/showImg/${item.picture}`" />
						{{index}}
					</li>
				</ul>
			</div>
			<a href="" class="right">&gt;</a>
		</div>
			<!-- Element轮播图 el-carousel:定义轮播区域的标签 -->
			<!-- triggle:设置图片切换的方式，默认是hover -->
			<el-carousel height="400px" trigger="click" arrow="always">
				<!-- 轮播项 -->
				<el-carousel-item v-for="item in imgList" :key="item.id">
					<img :src="`${$Imgurl}/api/public/showImg/${item.picture}`" />
				</el-carousel-item>
			</el-carousel>
			
			<!-- 好评 -->
			<div class="goods">
				<h3>好评最高5本书</h3>
			</div>
			<div class="hots">
				<h3>销量最高5本书</h3>
			</div>
			<div class="hodes">
				<h3>销量最高5本书</h3>
			</div>
	</div>
</template>

<script>
export default{
	name : 'Main'
	data(){
		return{
			imgList : [],
			show : 0,
			form : {
				msg : ''
			}
		}
	},
	created(){
		this.axios.get('/api/public/findHot/5/1').then( (res)=>{
			this.imgList = res.data.data;
		} ).catch( (error)=>{
			console.log(error);
		})
	},
	mounted(){
		// 组件渲染之后，开始自动轮播
		this.autoSwiper();
	},
	methods:{
		autoSwiper(){
			let x = this.show = this.imgList.length-1;
			let one = this.imgList[x];
			this.imgList.pop(this.show);
		}
	}
}
</script>

<style scoped>
.el-carousel__item img{
	width: 100%;
	height: 100%;
} 
.main .banner .picture .anima{
	opacity: 0;
	transition: all 2s;
}
.main{
	width: 100%;
}
.mian form{
	width: 95%;
	display: flex;
	justify-content: flex-end;
	margin-bottom: 15px;
}
.mian form input{
	height: 40px;
}
.main form input[type='text']{
	width: 40%;
	border: none;
	border: 1px solid sandybrown;
	border-radius: 6px 0px 0px 6px;
	text-indent: 1em;
}
.main form input[type='button']{
	width: 10%;
	border: none;
	height: 44px;
	background-color: #FFA500;
	border-radius: 0 6px 6px 0;
}
.main .banner .picture{
	width: 90%;
	height: 400px;
}
.main .banner .picture ul{
	height: 400px;
	overflow: hidden;
	position: relative;
}
.main .banner .picture ul li{
	width: 100%;
	height: 100%;
	float: left;
	opacity: 1;
	position: absolute;
}
.main .banner .picture ul li img{
	width: 100%;
	height: 100%;
	border-radius: 15px;
}
.mian .banner a{
	display: block;
	width: 4%;
	height: 100%;
	font-size: 40px;
	text-decoration: none;
	line-height: 400px;
	color: #FFA500;
	text-align: center;
}
.mian .goods,
.main .hots,
.mian .hodes{
	width: 100%;
	background-color: white;
}
.mian .goods h3,
{
	
}
</style>
